<template>
	<div class="system-role-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :inline="true">
					<!-- <el-form-item label="角色名称">
            <el-input size="default" v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable/>
          </el-form-item> -->
					<el-form-item label="筛选">
						<el-tree-select v-model="value" :data="data" filterable />
					</el-form-item>
					<el-form-item :label="value == null ? '请选择' : data[value].label">
						<el-input v-model="tableData.queryParams.title"
							:placeholder="value == null ? '请输入内容' : '请输入' + data[value].label" clearable class="w-50 m-2"
							size="default" @input="keywordChange($event)" />
					</el-form-item>
					<el-form-item label="日期筛选">
						<el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="To"
							start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" :size="size" />
					</el-form-item>

					<el-form-item>
						<el-button size="default" type="primary" class="ml10" @click="roleList">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
						<el-button size="default" type="primary" class="ml10" @click="Refresh">
							<!-- <el-icon><Refresh /></el-icon> -->
							刷新页面
						</el-button>

					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData.data" style="width: 100%">
				<el-table-column fixed prop="userId" label="会员ID" show-overflow-tooltip></el-table-column>
				<el-table-column prop="amount" label="操作金额"></el-table-column>
				<el-table-column prop="balanceBefore" label="操作前金额
" show-overflow-tooltip></el-table-column>
				<el-table-column prop="balanceAfter" label="操作后金额
" show-overflow-tooltip></el-table-column>
				<el-table-column prop="walletType" label="数量类型" show-overflow-tooltip></el-table-column>
				<el-table-column prop="operateType" label="金额变动类型" show-overflow-tooltip></el-table-column>
				<el-table-column prop="operator" label="管理员ID
" show-overflow-tooltip></el-table-column>
				<el-table-column prop="modelName" label="关联模型" show-overflow-tooltip></el-table-column>
				<el-table-column prop="modelId" label="模型ID" show-overflow-tooltip></el-table-column>
				<el-table-column prop="description" label="操作描述" show-overflow-tooltip></el-table-column>
				<el-table-column prop="remark" label="操作备注" show-overflow-tooltip></el-table-column>

			</el-table>
			<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize" @pagination="roleList" />
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent} from 'vue';
import { apiUserwalletflow } from "/@/api/financialmanagement/Userwalletflow";
import internal from 'stream';
//日期筛选
const value1 = ref('')
const value2 = ref('')
const size = ref<'default' | 'large' | 'small'>('default')
const shortcuts = [
	{
		text: 'Last week',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
			return [start, end]
		},
	},
	{
		text: 'Last month',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
			return [start, end]
		},
	},
	{
		text: 'Last 3 months',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
			return [start, end]
		},
	},
]

// 定义接口来定义对象的类型
interface TableData {
	userId: string; //会员ID
	amount: number;//操作金额
	balanceBefore: number;//操作前金额
	balanceAfter: number;//操作后金额
	walletType: string;//金额类型，中心钱包，返水钱包，平台总投注额，会员积分
	direction: internal;//数量类型，1加，-1减
	operateType: string;//金额变动类型
	operator: internal;//管理员ID
	modelName: string;//关联模型
	modelId: internal;   //模型ID
	description: string;//操作描述
	remark: string;//操作备注
}

interface TableDataState {
	tableData: {
		queryParams: {
			title: string,
			component: string
		},
		sourceData: Array<sourceDataff>;
		data: Array<TableData>;
		total: number;
		loading: boolean;
		param: {

			pageNum: number;
			pageSize: number;
		};
	};
}
interface sourceDataff {
	value: string,
	label: string
}


export default defineComponent({
	name: 'apiV1SystemRoleList',
	components: {  },
	setup() {
		const addRoleRef = ref();
		const editRoleRef = ref();
		const Adjusting = ref();
		const dataScopeRef = ref();
		const state = reactive<TableDataState>({
			tableData: {
				queryParams: {
					title: "",
					component: ""
				},
				data: [],
				sourceData: [{ value: '0', label: 'ID' }, { value: '1', label: '用户名' }, { value: '2', label: '金额范围' }],
				total: 0,
				loading: false,
				param: {
					pageNum: 1,
					pageSize: 10,
				},
			},
		});
	//搜索
	const keywordChange = (keywords: any) => {
		};
		// 初始化表格数据
		const initTableData = () => {
			roleList()
		};
	
		const value = ref()
		const roleList = () => {
			const data: Array<TableData> = [];
				apiUserwalletflow(state.tableData.param).then(res => {
				const list = res.data.logs ?? []
				list.map((item: TableData) => {
					data.push({
						userId: item.userId, //会员ID
						amount: item.amount,//操作金额
						balanceBefore: item.balanceBefore,//操作前金额
						balanceAfter: item.balanceAfter,//操作后金额
						walletType: item.walletType,//金额类型，中心钱包，返水钱包，平台总投注额，会员积分
						direction: item.direction,//数量类型，1加，-1减
						operateType: item.operateType,//金额变动类型
						operator: item.operator,//管理员ID
						modelName: item.modelName,//关联模型
						modelId: item.modelId,   //模型ID
						description: item.description,//操作描述
						remark: item.remark//操作备注
					})
				})
				state.tableData.data = data;
				state.tableData.total = res.data.total;
			})
		}

		const data = ref(state.tableData.sourceData)

		//筛选
		const filterable = (value: any) => {
	
		}
		// 刷新页面
		const Refresh = (row: Object) => {
			roleList();
		};

		// 分页改变
		const onHandleSizeChange = (val: number) => {
			state.tableData.param.pageSize = val;
		};
		// 分页改变
		const onHandleCurrentChange = (val: number) => {
			state.tableData.param.pageNum = val;
		};
		// 页面加载时
		onMounted(() => {
			initTableData();
		})

		return {
			value,
			Adjusting,
			addRoleRef,
			editRoleRef,
			dataScopeRef,
			onHandleSizeChange,
			onHandleCurrentChange,
			roleList,
			Refresh,
			...toRefs(state),
			keywordChange,
			filterable,
			data,
			size,
			shortcuts,
			value2,
			value1,
		};
	},
});
</script>
